<template>
    <div v-loading="listLoading" class="app-form-container">
        <div class="app-container">
            <el-form ref="mainForm" :rules="formRules" :model="temp" label-position="top" :class="{'form-disabled': justRead}">
                <InfoGroup :headline="$t('news.baseInfo')">
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="标题" prop="brandTitle">
                                <el-input v-model="temp.brandTitle" placeholder="" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="标题 英文" prop="brandTitleEn">
                                <el-input v-model="temp.brandTitleEn" placeholder="" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="简介" prop="brandIntro">
                                <el-input v-model="temp.brandIntro" placeholder="" type="textarea" rows="6" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="简介 英文" prop="brandIntroEn">
                                <el-input v-model="temp.brandIntroEn" placeholder="" type="textarea" rows="6" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-form-item label="视频" prop="brandVideo">
                                <UploadMedia v-model="temp.brandVideo" size="928*540" pb="56.25%" media="video" fit="cover" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="视频封面图" prop="brandVideoCover">
                                <UploadMedia v-model="temp.brandVideoCover" size="928*540" pb="56.25%" fit="cover" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="24">
                            <el-form-item label="轮播图" prop="brandImgs">
                                <UploadMediaList v-model="temp.brandImgs" size="616*814" pb="132%" fit="contain" :max="5" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </InfoGroup>
            </el-form>
        </div>
        <div class="app-form-footer">
            <el-button class="btn clear right" @click="$router.go(-1)">{{ $t('global.cancel') }}</el-button>
            <el-button class="btn" type="warning" @click="mainSubmit()">{{ pageType === 'edit' ? $t('global.save') : $t('global.insertKeep') }}</el-button>
            <el-button class="btn" type="primary" @click="mainSubmit(true)">{{ pageType === 'edit' ? $t('global.saveBack') : $t('global.insert') }}</el-button>
        </div>
    </div>
</template>

<script>
import {
    brandInsert as dataInsert,
    brandUpdate as dataUpdate,
    brandById as dataGet
} from '@/api/brand'
import { languageList } from '@/utils/data/statusData'
import { parseTime } from '@/utils';
import InfoGroup from '@/components/InfoGroup'
import UploadMedia from '@/components/UploadMedia'
import UploadMediaList from '@/components/UploadMediaList'
import { mapGetters } from 'vuex'

export default {
    name: 'ContentNewsDetail',
    components: { InfoGroup, UploadMedia, UploadMediaList },
    data() {
        return {
            languageList,
            itemId: 'brandId',
            pageType: this.$route.meta.type,
            justRead: ['edit'].includes(this.$route.meta.type),
            listLoading: true,
            info: {},
            temp: {}
        };
    },
    computed: {
        ...mapGetters([
            'language'
        ]),
        formRules() {
            return {
                brandTitle: [{ required: true, message: this.$t('tips.input') }],
                brandIntro: [{ required: true, message: this.$t('tips.input') }]
            };
        }
    },
    created(e) {
        if (this.pageType === 'insert') {
            this.listLoading = false;
        } else {
            const id = this.$route.params && this.$route.params.id;
            this.getData({ [this.itemId]: id }).then(res => {});
        }
    },
    methods: {
        parseTime,
        getData(param) {
            return dataGet(param).then(res => {
                this.listLoading = true;
                this.info = { ...res.data };
                this.temp = { ...res.data };
                console.log('赋值咯');
                this.listLoading = false;
            });
        },
        resetTemp() {
            this.temp = {};
        },
        // 新增|修改提交
        mainSubmit(close) {
            this.$refs['mainForm'].validate((valid, item) => {
                const param = {
                    [this.itemId]: '',
                    brandTitle: '',
                    brandTitleEn: '',
                    brandIntro: '',
                    brandIntroEn: '',
                    brandVideo: '',
                    brandVideoCover: '',
                    brandImgs: ''
                };
                for (const key in param) {
                    param[key] = this.temp[key];
                }
                // console.log(param);
                if (valid) {
                    this.handleSubmit(param).then(res => {
                        this.$notify({
                            message: this.pageType === 'edit' ? this.$t('global.editSuccess') : this.$t('global.insertSuccess'),
                            type: 'success'
                        });
                        if (close) this.$router.go(-1);
                    });
                }
            });
        },
        handleSubmit(param) {
            return this.pageType === 'edit' ? dataUpdate(param) : dataInsert(param);
        }
    }
};
</script>
<style scoped lang="scss"></style>
